<template>
  <div>
    <el-table ref="multipleTable" :data="tableData" :row-key="id" size="small" >
      <el-table-column v-if="columns.length===0" width="150">
        <template slot-scope="scope">
          <span v-for="space in scope.row._level" :key="space" class="ms-tree-space"></span>
          <span v-if="iconShow(0,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
            <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
            <i v-else class="el-icon-minus"></i>
          </span>
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="(column, index) in columns"
        v-else
        :key="index"
        :label="column.text"
        :width="column.width"
        :align="column.align">
        <template slot-scope="scope">
          <template v-for="space in scope.row._level" >
            <span  v-if="index === 0" :key="space" class="ms-tree-space"></span>
          </template>
          <div v-if="column.text == '是否启用'" class="td">
            <el-button v-if="scope.row.is_use == 1" type="primary" size="mini" @click="setUse(scope.row)">已启用</el-button>
            <el-button v-else size="mini" @click="setUse(scope.row)">未启用</el-button>
          </div>
          <div v-else class="td">{{scope.row[column.value]}}</div>
          <div class="td" v-if="column.button">
            <el-button v-for="btn in column.button" :type="btn.type"
                       :key='btn.name'
                       @click="isClick(scope.row,btn.event,btn.n)"
                       size="small" >{{btn.name}}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="pagination">
      <el-pagination background
                     layout="total,sizes,prev,pager, next"
                     @current-change="currentChange"
                     @size-change="sizeChange"
                     :page-sizes="pagination.pageSizes"
                     :page-size.sync="pagination.pageSize"
                     :total="pagination.total"
                     :current-page.sync="pagination.currentPage"
                     class="paging fr">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    // name: "TreeTabletest",
    data() {
      return {
        id:'id'
      };
    },
    inject: ["reload"],
    props: {
      /* eslint-disable */
      //表格数据
      tableData: {
        type: [Array, Object],
        required: true
      },
      //表头菜单
      columns: {
        type: Array,
        default: () => []
      },
      pagination:{
        type: [Array, Object],
      },
      setUseEvent:{
        default:''
      },
      currentChangeEvent:{
        default:''
      },
      sizeChangeEvent:{
        default:''
      }
    },
    computed: {},
    methods: {
      //操作点击事件
      isClick(row,event,n){
        this.$emit(event,row,n)
      },
      //是否启用点击事件
      setUse(row){
        this.$emit(this.setUseEvent,row);
      },
      currentChange(val){
        this.$emit(this.currentChangeEvent,val);
      },
      sizeChange(val){
        this.$emit(this.sizeChangeEvent,val);
      },
      // 切换下级是否展开
      toggleExpanded: function(trIndex) {
        const record = this.formatData[trIndex];
        record._expanded = !record._expanded;
      },
      // 图标显示
      iconShow(index, record) {
        return index === 0 && record.children && record.children.length > 0;
      },
      //设置表头全选
      renderHeader(h, data) {
        return h("span", [
          h("span", {
            attrs: {
              id: "chooseall",
              style:
                "box-sizing: border-box;width: 14px;height: 14px;background-color: #fff;"
            }
          })
        ]);
      },
    },
    mounted() {
      // console.log(this.tableData);
    }
  };
</script>
<style rel="stylesheet/css">
    @keyframes treeTableShow {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @-webkit-keyframes treeTableShow {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 18px;
    height: 14px;
  }
  .ms-tree-space::before {
    content: "";
  }
  .processContainer {
    width: 100%;
    height: 100%;
  }
  table td {
    line-height: 26px;
  }
  .tree-ctrl {
    position: relative;
    cursor: pointer;
    color: #2196f3;
    margin-left: -18px;
  }
  .td{
    display: inline-block;
  }
  .paging {
    margin: 15px;
    height: 28px;
  }
  .table-btn{

  }

</style>
